<template>
  <div>
    <div>
      <el-button @click="goBack" type="danger" icon="el-icon-arrow-left">
        后退
      </el-button>
    </div>
    <!-- 
    <el-button @click="getDetail">查看</el-button>

    <div>{{ id }}</div> -->

    <div class="title">
      <h1>校级项目的基本信息</h1>
    </div>

    <div class="box">
      <el-tag type="success">项目信息</el-tag>
      <div class="content">
        <div class="content-ul-left">
          <ul>
            <li><span>项目名称 : </span>{{ info.projectType == null ? '暂无' : info.projectType }}</li>
            <li><span>所属学院 : </span>{{ info.college == null ? '暂无' : info.college }}</li>
            <li><span>平均分 : </span>{{ info.collegeAverage == null ? '暂无' : info.collegeAverage }}</li>
            <li><span>项目负责人: </span>{{ info.leader == null ? '暂无' : info.leader }}</li>
            <li><span>项目概要 : </span>{{ info.outline == null ? '暂无' : info.outline }}</li>
          </ul>
        </div>

        <div class="content-ul-right">
          <ul>
            <li><span>项目类型 : </span>{{ info.projectType == null ? '暂无' : info.projectType }}</li>
            <li><span>项目级别 : </span>{{ info.ranks == null ? '暂无' : info.ranks }}</li>
            <li><span>项目评分: </span>{{ info.score == null ? '暂无' : info.score }}</li>
            <li><span>指导老师 : </span>{{ info.teacherName == null ? '暂无' : info.teacherName }}</li>
            <li><span>项目标题 : </span>{{ info.title == null ? '暂无' : info.title }}</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="box">
      <el-tag type="success">成员信息</el-tag>

      <!-- 学生成员信息 -->
      <div>
        <el-table style="width: 100%" :data="studat">
          <el-table-column type="expand">
            <template  slot-scope="props" >
              
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="学号" >
                  <span>
                    {{ props.row.number?props.row.number:'null'  }}</span>
                </el-form-item>
                <el-form-item label="名字">
                  <span>{{ props.row.name==1?'负责人':'普通成员'}}</span>
                </el-form-item>
                <el-form-item label="描述">
                  <span>{{ props.row.name?props.row.name:'null'  }}</span>
                </el-form-item>
                <el-form-item label="所属学院">
                  <span>{{ props.row.college?props.row.college:'null'  }}</span>
                </el-form-item>
                <el-form-item label="创建时间">
                  <span>{{ props.row.createTime?props.row.createTime:'null'  }}</span>
                </el-form-item>
                <el-form-item label="年级">
                  <span>{{ props.row.grade?props.row.grade:'null' }}</span>
                </el-form-item>
                <el-form-item label="手机号码">
                  <span>{{ props.row.phone?props.row.phone:'null'  }}</span>
                </el-form-item>
                <el-form-item label="邮箱">
                  <span>{{ props.row.mailbox?props.row.mailbox:'null'  }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="学号" prop="number">
          </el-table-column>
          <el-table-column label="学生名称" prop="name">
          </el-table-column>
          <el-table-column label="描述" prop="statu">
            <template slot-scope="scope">
              <div>{{scope.row.statu==1?'负责人':'普通成员'}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>

    <div class="box">
      <el-tag type="success">材料下载</el-tag>
      <div class="content">
        <!-- <a :href="info.file">点击下载</a> -->
        <a :href="(cdn + '/download/' + info.file)" target="_blank">材料下载</a>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 1,
      size: "",
      info: {},

      studat: [],
      cdn: window.SITE_CONFIG['baseUrl'],
    };
  },

  mounted() {
    this.id = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    async getDetail() {
      await this.$http({
        url: this.$http.adornUrl("/sys/school/info/" + this.id),
        method: "get",
        params: this.$http.adornParams({
          // 'id':this.id
          //   // 'page': this.pageIndex,
          //   // 'limit': this.pageSize,
          //   // 'key': this.dataForm.key,
          //   // 'userId':
        }),
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message.success("获取成功");
          console.log(data);
          this.info = data.school;
          this.studat = [this.info.stuLeader, ...this.info.studentList];
        } else {
          this.$message.error("获取失败" + data.msg);
        }
      });
    },
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss">
.title {
  // margin: 0 auto;
  text-align: center;
}

.box {
  margin: 20px 0;
  padding: 20px;
  border-radius: 10px;
  background-color: #f2f3f5;

  .content {
    padding: 20px;

    .content-ul-left {
      display: inline-block;
      width: 400px;
    }

    .content-ul-right {
      display: inline-block;
      width: 400px;
    }
  }


}
</style>